@use "../../assets/scss/mixins/base" as mx;

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

$cols: 12;
$rows: 12;
$bodySize: calc(100vw + calc(100vw / $cols));

$dotSize: 1.75vw;
$gutter: 3vw;
$lineWeight: 2px;
$speed: 2.5s;

$bg: black;
$fg: white;

body {
  background-color: $bg;
  overflow: hidden;
  color: $fg;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: $bodySize;
  height: $bodySize;
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  grid-template-rows: repeat($rows, 1fr);
  .square {
    position: relative;
    @include mx.pseudo-ba() {
      background-color: $fg;
      border-radius: 4px;
    }
    &::before {
      top: 0;
      left: calc($dotSize / 2) + calc($gutter / 2);
      @include mx.wh(calc(100% - #{$dotSize} - #{$gutter}), $lineWeight);
      transform: translateY(-50%) rotate(0deg);
      animation: lineYpulse $speed infinite alternate-reverse ease-in;
    }
    &::after {
      top: calc($dotSize / 2) + calc($gutter / 2);
      left: 0;
      @include mx.wh($lineWeight, calc(100% - #{$dotSize} - #{$gutter}));
      transform: translateX(-50%) rotate(0deg);
      animation: lineXpulse $speed infinite alternate-reverse ease-in;
    }
    .dot {
      position: absolute;
      @include mx.wh($dotSize, $dotSize);
      background: $fg;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: dotPulse $speed infinite alternate ease-in;
      &:last-child {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.5);
        animation-direction: alternate-reverse;
      }
    }

    $centerRow: ceil(calc($rows / 2));
    $centerCol: ceil(calc($cols / 2));
    $interval: 1;
    @for $i from 0 through $rows {
      $rowPower: calc(($centerRow - abs($centerRow - $i)) / 4);
      @for $j from 1 through $cols {
        $index: $j + ($cols * $i);
        $colPower: calc(($centerCol - abs($centerCol - $j)) / 4);
        &:nth-child(#{$index}) {
          &::after,
          &::before,
          .dot {
            opacity: calc(($rowPower + $colPower) / 2);
            animation-delay: calc(($rowPower + $colPower) * -0.5s);
          }
        }
      }
    }
  }
}

@keyframes dotPulse {
  0%,
  35% {
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  65%,
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@keyframes lineXpulse {
  0%,
  35% {
    transform: translate3d(-50%, 0, 0) rotate(0deg);
  }
  65%,
  100% {
    transform: translate3d(-50%, 0, 0) rotate(90deg);
  }
}
@keyframes lineYpulse {
  0%,
  35% {
    transform: translate3d(0, -50%, 0) rotate(0deg);
  }
  65%,
  100% {
    transform: translate3d(0, -50%, 0) rotate(90deg);
  }
}
